<template>
  <view class="manage">

    <view class="manage-process" v-if="status===2">
      <view class="manage-process-box">
        <view class="manage-process-box-active" :style="{width:process+'%'}"></view>
      </view>
    </view>

    <view class="list">
      <view class="list-item" @click="onChooseItem(index)" v-for="(item,index) in trajectoryList" :key="index">
        <view class="list-item-left">
          <view class="list-item-left-radio">
            <image v-if="!item.choose" src="/@/static/images/fuxuankuang-zhengchang.png"></image>
            <image v-else src="/@/static/images/fuxuankuang-xuanzhong.png"></image>
          </view>
          <view class="list-item-left-name">{{ item.label }}</view>
        </view>
        <view class="list-item-right">
          <view class="list-item-right-cover">
            下载
          </view>
          <view class="list-item-right-image">
            <image src="/@/static/images/logo.png"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="btn">
      <view class="btn-block"></view>
      <view class="btn-main" @click="onOperation">{{
          status === 1 ? '下发轨迹' : status === 2 ? "取消作业" : ""
        }}
      </view>
      <view class="btn-delete" @click="onDelete">删除</view>
    </view>

    <!--下发轨迹-->
    <noticeModal @close="onCloseDispatchModal" @confirm="onConfirmDispatchModal" v-if="dispatchModalVisible"
                 :visible="dispatchModalVisible"
                 title="确定下发所选中的轨迹？"></noticeModal>
    <!--执行轨迹-->
    <noticeModal v-if="implementModalVisible" :visible="implementModalVisible"
                 title="是否开始执行所选轨迹？"></noticeModal>

    <!--删除轨迹-->
    <noticeModal @close="deleteModalVisible=false" @confirm="onConfirmDeleteModal" v-if="deleteModalVisible"
                 :visible="deleteModalVisible"
                 title="确定删除所选中的轨迹吗？" content="删除后轨迹无法恢复哦"></noticeModal>


  </view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue"
import {showMessage} from "/@/utils/util";
import {cloneDeep} from "lodash"

const trajectoryList = ref([
  {label: "轨迹1", choose: false},
  {label: "轨迹2", choose: false},
  {label: "轨迹3", choose: false},
  {label: "轨迹4", choose: false},
  {label: "轨迹5", choose: false},
  {label: "轨迹6", choose: false},
  {label: "轨迹7", choose: false},
  {label: "轨迹8", choose: false},
  {label: "轨迹9", choose: false},
  {label: "轨迹10", choose: false},
  {label: "轨迹11", choose: false},
  {label: "轨迹12", choose: false},
  {label: "轨迹13", choose: false},
  {label: "轨迹14", choose: false},
  {label: "轨迹15", choose: false},
  {label: "轨迹16", choose: false},
])

// 1需要下发轨迹 2需要取消作业
const status = ref(2);

// 下发轨迹弹窗
const dispatchModalVisible = ref(false)
// 执行轨迹弹窗
const implementModalVisible = ref(false)
// 删除轨迹弹窗
const deleteModalVisible = ref(false)


// 进度（百分比）
const process = ref(65)

onLoad(() => {
})

const onDelete = () => {
  const isChoose = trajectoryList.value.some(item => item.choose)
  if (!isChoose) {
    showMessage("请选择轨迹")
    return;
  }
  deleteModalVisible.value = true
}

const onConfirmDeleteModal = () => {
  let list = cloneDeep(trajectoryList.value)
  trajectoryList.value = list.filter(item => {
    return !item.choose
  })
  showMessage('删除成功')
  deleteModalVisible.value = false
}

const resetTrajectoryListChoose = () => {
  let list = cloneDeep(trajectoryList.value)
  list.forEach((item) => {
    item.choose = false
  })
  trajectoryList.value = list
}

const onCloseDispatchModal = () => {
  dispatchModalVisible.value = false
}

const onConfirmDispatchModal = () => {
  onCloseDispatchModal()
  showMessage('下发轨迹成功')
  resetTrajectoryListChoose()
}

const onChooseItem = (e) => {
  let list = cloneDeep(trajectoryList.value)
  list.forEach((item, index) => {
    if (index === e) {
      item.choose = !item.choose
    }
  })
  trajectoryList.value = list
}

const onOperation = () => {
  const isChoose = trajectoryList.value.some(item => item.choose)
  if (!isChoose) {
    showMessage("请选择轨迹")
    return;
  }
  if (status.value === 1) {
    dispatchModalVisible.value = true
  } else if (status.value === 2) {
    implementModalVisible.value = true
  }
}
</script>

<style lang="scss" scoped>
@import "manage";
</style>
